<template>
  <div class="connect" v-loading="popLoading">
    <div class="connect_box">
        <el-form :inline="true" :model="selectForm" class="demo-form-inline">
          <el-form-item :label="$t('UserInfo.role_name')">
            <el-input v-model="selectForm.roleName" :placeholder="$t('UserInfo.role_name')"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"  @click="search" >{{$t('public.query')}}</el-button>
          </el-form-item>
        </el-form>
    </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="roleName"
          align="center"
          :label="$t('UserInfo.role_name')"
          min-width="180">
          <template slot-scope="{row}">
            {{lang=='ko'?row.korName:row.roleName}}
          </template>
        </el-table-column>
        <el-table-column
          prop="dataPerms"
          align="center"
          :label="$t('UserInfo.Role_Permission')"
          min-width="180">
           <template slot-scope="{row}">
             <el-button  @click="pop_show(row.id)" type="text" size="small">
             {{lang=='ko'?row.korDataPerms:row.dataPerms}}
             </el-button>
           </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          align="center"
          :label="$t('public.Creation_time')">
        </el-table-column>
      </el-table>
      <el-dialog
        :title="$t('UserInfo.Role_Permission')"
        :visible.sync="dialogShow"
         width="70%"
        :before-close="handleClose">
        <!-- <el-tree
          :data="data"
          show-checkbox
          node-key="id"
          :default-expand-all="true"
           @check="(click, checked)=>{handleCheckChange(click, checked)}"
          :default-checked-keys="menuIds"
          :props="defaultProps">
        </el-tree> -->
          <el-tree
            ref="tree"
            @check="check"
            :check-strictly="true"
            :data="data"
            show-checkbox
            :default-expand-all="true"
            node-key="id"
            :default-checked-keys="menuIds"
            :props="{children: 'children', label: 'meta'}">
            <template #default="{node,data}">
                <span class="custom-tree-node" >
                <span>{{ $t('route.'+node.label.title)  }}</span>
                </span>
            </template>
          </el-tree>

         <el-button  @click="dialogShow=false">{{$t('public.cancellation')}}</el-button>
         <el-button @click="submit" type="primary">{{$t('public.determine')}}</el-button>
      </el-dialog>
  </div>
</template>

<script>
  import {
   role_list,
   role_info,
   role_save,
   role_update
  } from '@/api/wqzApi'
  export default {
    components: {},
    data() {
      return {
        popLoading:false,
        lang:this.$store.getters.language,
        tableData:[],
        menuIds:[],
        defaultProps: {
          children: 'children',
          label: 'title',
          value:'id'
        },
        role_info:{},
        data: [],
        dialogShow:false,//数据权限对话框
        selectForm:{
          roleName:'',
        }
      }
    },

    created() {
      console.log(this.$store.getters.language)
    },
    mounted() {
      this.getrole_list()
    },
    destroyed() {

    },
    methods: {
      search(){
        this.getrole_list()
      },
     //调用check事件/下面三个方法都调用就可以实现，点击勾选父节点会跟随选中子节点/取消勾选父节点会跟随全部取消选中
     check(currentObj, treeStatus) {
           // 用于：父子节点严格互不关联时，父节点勾选变化时通知子节点同步变化，实现单向关联。
           let selected = treeStatus.checkedKeys.indexOf(currentObj.id)
           //不等于-1当前是选中状态
           if (selected !== -1) {
             this.selectedParent(currentObj)
             //统一处理子节点为相同的勾选状态
             this.uniteChildSame(currentObj, true)

           }else {
             //等于 -1 是取消选中状态
             this.uniteChildSame(currentObj, false) //
           }
            this.role_info.menuIds = this.$refs.tree.getCheckedKeys()
         },
         uniteChildSame(treeList, isSelected) {
           this.$refs.tree.setChecked(treeList.id, isSelected)
           if (treeList.children) {
             for (let i = 0; i < treeList.children.length; i++) {
               this.uniteChildSame(treeList.children[i], isSelected)
             }
           }
         },
         selectedParent(currentObj) {
           let currentNode = this.$refs.tree.getNode(currentObj)
           if (currentNode.parent.key !== undefined) {
             this.$refs.tree.setChecked(currentNode.parent, true)
             this.selectedParent(currentNode.parent)
           }
         },

      submit(){
        // 数据权限编辑后提交
        role_update(this.role_info).then(res=>{
          this.$message({
            type:'success',
            message:this.$t('public.Operation_successful')
          })
          this.dialogShow = !this.dialogShow
          this.getrole_list()
        })
      },

      pop_show(id){
        var data = {
          roleId:id
        }
        this.popLoading = true
        role_info(data).then(res=>{
          this.role_info = res.role
          this.data = res.role.menuList
          this.menuIds = res.role.menuIds
          this.dialogShow = !this.dialogShow
          this.popLoading = false
        }).catch(err=>{
          this.popLoading = false
        })

      },
      getrole_list(){
       var data={
          roleName:this.selectForm.roleName
        }
        console.log(data)
        role_list(data).then(res=>{

          this.tableData = res.list

        })
      },
      addRoles(){},

      handleClose(){
        this.dialogShow = !this.dialogShow
      },

    }
  }
</script>

<style scoped>
  .connect_box{
    background-color: #fff;
    padding: 1%;
  }
</style>
